<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>

    <![endif]-->
    <style>
        .img-responsive1{
            width: 100%;
        }
        .dd{
          margin-left: 140px;
        }
    </style>
    <script type="text/javascript">

        function chang() {
            var _img= document.getElementById("inputPassword5")
            _img.src="/CheckImgServlet?"+new Date().getTime()

        }
        function qi() {
            var _yuhu=document.getElementById("inputEmail3")
            if (_yuhu.value=="请输入账号"){
                _yuhu.value=""
            }
        }
        function guai() {
            var _guai= document.getElementById("inputPassword3")
            if (_guai.value=="请输入密码"){
                _guai.value=""
            }
        }
        function df() {
            var t =document.getElementById("inputEmail3")
            var username=t.value
            var regexp=new RegExp("^[0-9]{6,14}$")
            if (regexp.test(username)){
                document.getElementById("yuhu").innerHTML=""
                return true
            }else {
                document.getElementById("yuhu").innerHTML="账号格式错误,请输入数字为6到14位"
                return false
            }
        }
        function of() {
            var d =document.getElementById("inputPassword3")
            var password= d.value
            var regexp=new RegExp("^[0-9]{6,14}$")
            if (regexp.test(password)){
                document.getElementById("mima").innerHTML=""
                return true
            }else {
                document.getElementById("mima").innerHTML="密码格式错误,请输入数字为6到14位"
                return false
            }
        }
        function off() {
            var f=document.getElementById("inputPassword3").value;
            var f1=document.getElementById("inputPassword7").value;
            if (f==""|| f1==""){
                document.getElementById("mi").innerHTML="密码不能为空"
                return;
            }
            if (f!=f1){
                document.getElementById("mi").innerHTML="两次密码不一致"
                return false;
            }else {
                document.getElementById("mi").innerHTML=""
                return true
            }
        }
        function gj() {
           var  eye = document.getElementById("sp")
            var gf= document.getElementById("inputPassword3")
            if (gf.type=="text"){
                gf.type="password"
                eye.className="glyphicon glyphicon-eye-close"
            } else if (gf.type=="password"){
                gf.type="text"
                eye.className="glyphicon glyphicon-eye-open"
            }
        }


    </script>
</head>
<body>

<!--第一行-->
<div class="row paddtop">
    <img src="images/top_banner.jpg" class="img-responsive1" >
    </div>
    <div class="row">
        <div class="col-md-3">

        </div>
        <div class="col-md-7">

        </div>
        <div class="col-md-2">
            <span>点击切换</span>
            <a href="login.jsp" class="btn btn-default">登录</a>
            <a href="register.jsp" class="btn btn-default">注册</a>
        </div>
    </div>

<br>
<br>
<br>
<br>
<br>
<center><h1>用户信息管理系统</h1></center>
<form class="form-horizontal" action="/RegisterServlet" id="formid" >
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-4 control-label">用户</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="inputEmail3" placeholder="请输入账号" value="${requestScope.ddd.name}" name="name" onfocus="qi()"  onblur="df()" autocomplete="off">
        </div>
        <div  class="col-sm-3.5">
            <span id="yuhu" style="color: firebrick" ></span>
        </div>

    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-4 control-label">角色</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="inputEmail4" placeholder="请输入角色" value="${requestScope.ddd.role}" name="role" onfocus="qi1()"  onblur="df1()" autocomplete="off">
        </div>
        <div  class="col-sm-3.5">
            <span id="ro" style="color: firebrick" ></span>
        </div>

    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-4 control-label">密码</label>
        <div class="col-sm-4">
            <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" name="password" onfocus="guai()" onblur="of()">
            <span   id="sp" class=" glyphicon glyphicon-eye-close"  onclick="gj()"></span>
        </div>
        <div class="col-sm-3.5">
            <span id="mima" style="color: firebrick"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-4 control-label">确认密码</label>
        <div class="col-sm-4">
            <input type="password" class="form-control" id="inputPassword7" placeholder="请输入密码" name="password1" onfocus="guai()" onblur="off()">
        </div>
        <div class="col-sm-3.5">
            <span id="mi" style="color: firebrick"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-4 control-label">验证码</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="inputPassword4"  name="yanzhengma"><br>
            <img src="/CheckImgServlet"  id="inputPassword5" onclick="chang();">
        </div>

    </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-6">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-5 col-sm-5">
            <button type="submit" id="submit" class="btn btn-default">注册</button>
            <button type="reset" class="btn btn-default dd">取消</button>
        </div>
    </div>
</form>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="bootstrap/js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<script>
    $(function () {
        if((${requestScope.us}) =="2"){
            alert("验证码错误")
        }
    })
</script>

<%--<script >
    $(function () {
        $("#submit").click(function () {
            if (off && of && df) {
                $("#formid").submit()
            }
            return false
        })
    })

</script>--%>
</html>
